<template>
    <div>
        <div style="width:500px;height:500px" ref="chart"></div>
    </div>
</template>
<script>
// 局部使用：全局引入会将所有的echarts图表打包，导致体积过大，所以最好还是按需引入。（也就是局部使用。）
const echarts = require("echarts");
export default {
    data() {
        return {};
    },
    methods: {
        initCharts() {
            //获取到元素div
            let myChart = echarts.init(this.$refs.chart);
            // 绘制图表
            myChart.setOption({
                //定义说明标题
                title: { text: "在Vue中使用echarts" },
                //工具提示 : 鼠标移动到每个柱状图上时，会有提示信息 值为Boolean值，true提示  false关闭提示
                tooltip: {show:true},
                //X轴坐标的信息，值是数组
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                ////y轴坐标的信息，值是数组
                yAxis: {
                    // data:['0','10','20','30','40']
                },
                //每个柱状图信息数量
                series: [
                    {
                        name: "销量",  //提示信息的文字
                        type: "bar",   //对应的xAxis 中每个下标信息
                        data: [5, 20, 36, 10, 10, 20] //对应的xAxis 中每个下标的信息数量
                    }
                ]
            });
        }
    },
    mounted() {
        this.initCharts();
    }
};
</script>
